/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/19 7:41 下午
 * @version V1.0
 */
import React from 'react';
import styles from './index.less';
import { connect, Link } from 'umi';
import { Button, Form, Input, Table } from 'antd';
import moment from 'moment';

const ShopList = ({ ShopList: { dataSource, keyword, limit, offset }, dispatch, loading }) => {
    const [form] = Form.useForm();
    const search = () => {
        form.validateFields().then(values => {
            const { keyword } = values;
            dispatch({
                type: 'ShopList/getShopList',
                payload: {
                    keyword,
                    limit,
                    offset,
                },
            });
        });
    };
    const empty = () => {
        form.resetFields();
        dispatch({
            type: 'ShopList/getShopList',
            payload: {
                keyword: '',
                limit: 10,
                offset: 0,
            },
        });
    };
    const searchByOffset = (offset) => {
        dispatch({
            type: 'ShopList/getShopList',
            payload: {
                keyword,
                limit,
                offset: offset - 1,
            },
        });
    };
    const columns = [
        {
            title: '店铺名',
            align: 'left',
            dataIndex: 'name',
        },
        {
            title: '地址',
            dataIndex: 'address',
            align: 'left',
        },
        {
            title: '店铺负责人',
            dataIndex: 'leader',
            align: 'left',
        },
        {
            title: '联系方式',
            dataIndex: 'phone',
            align: 'left',
        },
        {
            title: '店铺分类',
            dataIndex: 'category_name',
            align: 'left',
        },
        {
            title: '营业时间',
            align: 'left',
            render: (item) => (<span>{`${item.start_time}/${item.end_time}`}</span>)
        },
        {
            title: '店铺状态',
            dataIndex: 'status',
            align: 'left',
            render: (status) => {
                let statusHtml = '';
                switch (status) {
                    case 0 :
                        statusHtml = '待审核';
                        break;
                    case 1 :
                        statusHtml = '审核通过';
                        break;
                    case -1 :
                        statusHtml = '已拒绝';
                        break;
                    default :
                        statusHtml = '--';
                }
                return (
                    <div>
                        {statusHtml}
                    </div>
                );
            },
        },
        {
            title: '创建时间',
            dataIndex: 'created_time',
            align: 'left',
            render: (created_time) => moment(created_time).format('YYYY-MM-DD hh:mm:ss'),
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <Link to={{
                            pathname: '/shop-manage/shop/edit',
                            state: { fromDashboard: true },
                            query: { id: item.id },
                        }} style={{ marginRight: '10px' }}>编辑</Link>
                        <Link to={{
                            pathname: '/shop-manage/shop/detail',
                            state: { fromDashboard: true },
                            query: { id: item.id },
                        }} style={{ marginRight: '10px' }}>详情</Link>
                        <Link to={{
                            pathname: '/news-manage/news/add',
                            state: { fromDashboard: true },
                            query: { shop_id: item.id, shop_name: item.name },
                        }}>新增商品</Link>
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerFilter}>
                <Form
                    layout="inline"
                    form={form}
                >
                    <Form.Item
                        label="关键字"
                        name="keyword"
                    >
                        <Input placeholder="店铺名称、负责人、手机号"/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" style={{ marginRight: '16px' }} onClick={search}>查询</Button>
                        <Button type="primary" onClick={empty}>清空</Button>
                        <Button type="primary" style={{ marginLeft: '16px' }}>
                            <Link to={`/shop-manage/shop/add`}>创建店铺</Link>
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <div className={styles.pageContainerTable}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey='id' // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={dataSource.list}
                    pagination={{
                        total: dataSource.total,// 总记录数
                        defaultPageSize: 10, // 默认显示条数
                        showQuickJumper: true, // 快速跳转
                        // showSizeChanger: true, // 一页展示数据条数
                        onChange: (offset) => searchByOffset(offset),
                        showTotal: () => {
                            return `共${dataSource.total}条`;
                        },
                    }}
                />
            </div>
        </div>
    );
};


export default connect(({ ShopList, dispatch, loading }) => ({
    ShopList,
    dispatch,
    loading: loading.effects['ShopList/getShopList'],
}))(ShopList);
